<template>
 <q-dialog v-model="localShowComputed">
    <q-card class="bg-cyan">
      <vue-qr class="q-pa-xs" :text="'config.value'" :size="200" :margin="0"></vue-qr>
      <q-card-section>

        <div class="row no-wrap items-center">
          <div class="col text-h6 ellipsis text-black">
            请扫码获取验证码
          </div>
        </div>
      </q-card-section>
      <q-separator />

      <q-card-actions align="right">
        <q-btn v-close-popup flat color="primary" label="关闭" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
export default defineComponent({
  components: {
    VueQr
  },
  props: {
    show: Boolean
  },
  setup (props, { emit }) {
    const localShowComputed = computed({
      get: () => {
        if (props.show) {
          return true
        } else {
          return false
        }
      },
      set: () => {
        emit('hideQrCode')
      }
    } )
    return {
      props,
      localShowComputed
    }
  }
})
</script>
<style scoped>
</style>